<script setup>
import { ref, defineEmits, defineProps } from 'vue';

const message = ref('');
const context_query = ref('');
const emit = defineEmits(['message-sent']);

const props = defineProps({
  advanced: {
    type: Boolean,
    default: false
  }
});

const sendMessage = () => {
  // 发送消息的逻辑
  console.log('Message sent:', message.value);

  // 发射事件,通知app内逻辑更新ChatPanel
  emit('message-sent', {'message': message.value, 'context_query': context_query.value});

  message.value = '';
};

const handleKeyPress = (event) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault();
    sendMessage();
  }
};
</script>
<template>
  <div class="chat-input">
    <textarea
        v-model="message"
        @keypress="handleKeyPress"
        placeholder="聊天！"
        rows="3"
    ></textarea>
    <div v-if="advanced" class="context-query">
      知识库查询句：
      <textarea
          v-model="context_query"
          placeholder="用于查询知识库来获取上下文的句子，留空则和聊天输入一致。"
          rows="3"
        ></textarea>
    </div>
    <div class="buttons">
      <button @click="sendMessage">发送（回车）</button>
<!--      <button>Restart</button>-->
    </div>
  </div>
</template>

<style scoped>
.chat-input {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  resize: none;
  font-family: 'Arial', sans-serif;
}

.buttons {
  display: inline-block;
  gap: 10px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #6f6f6f;
  color: white;
  cursor: pointer;
  font-family: 'Arial', sans-serif;
}

button:hover {
  background-color: #0056b3;
}
</style>